<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="cache-control" content="no-cache">

    <script src="/js/jquery-1.8.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/maintable.css" ></link>
    <script>
        $(function (){
            var str= "${roleMenu}";
            var arr=str.split(",");

            //给Array类 扩展一个 contains方法
            Array.prototype.contains=function(e){
                for(var i=0;i<this.length;i++){
                    if(this[i]==e)
                        return true;
                }

                return false;
            }

            $("[name=menuIds]").each(function(){
                if(arr.contains( this.value))
                    this.checked=true;
            });
//  ======================================================
            //以下编写菜单联动功能（测试版）
            // 1.先完成勾选一个一级菜单多选框 ——> 勾选对应的二级勾选框（单一逻辑）
            $(".firstCheck").click(function (){
                $(this).closest("tr").find(".doubleCheck").prop("checked", this.checked);
            });
            // 2.再完成勾选对应的二级勾选框 ——> 选一个一级菜单多选框（多逻辑）
            $(".doubleCheck").click(function() {
                // 找到当前二级复选框所在行的一级复选框
                var firstCheck = $(this).closest('tr').find(".firstCheck");
                // 所在行内是否还有其他的二级复选框被选中
                var anyChecked = $(this).closest('tr').find(".doubleCheck:checked");
                // 如果没有二级复选框被选中，则取消对应的一级复选框的选中
                if (!anyChecked.length>0) {
                    firstCheck.prop("checked", false);
                }
                // 如果有一个二级复选框被勾选，那么勾选对应的一级复选框
                else if (!firstCheck.prop("checked")) {
                    firstCheck.prop("checked", true);
                }
            });
        });
    </script>

</head>

<body>
    <div class ="div_title">
        <div class="div_titlename"> <img src="/images/san_jiao.gif" ><span>角色授权——当前角色： ${roleInfo.roleName }</span></div>
    </div>
    <form action="RoleServlet" method="post">
        <input type="hidden" name="flag" value="updateRoleMenu" >
        <input type="hidden" name="roleId" value="${roleInfo.id }" >

        <table border="1" class="main_table">
            <tr>
                <th>一级菜单</th>
                <th>二级菜单</th>
            </tr>

            <c:forEach var="m" items="${menuList }">
                <tr>
                    <td>
                        <input type="checkbox" name="menuIds" value="${m.id }" id="${m.id}" class="firstCheck"> ${m.menuName }
                    </td>
                    <td>
                        <c:forEach var="m_sub" items="${m.subMenuList }">
                            <input type="checkbox" name="menuIds" value="${m_sub.id }" id="${m_sub.id }" class="doubleCheck"> ${m_sub.menuName }<br>
                        </c:forEach>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <input type="submit" value="提交" class="submit-btn" onclick="return confirm('确认要提交吗')">
        <label id="result_msg" class="result_msg">${msg}</label>
    </form>
</body>
</html>